<!-- 地图工具（图例、底图按钮） -->
<template>
  <div class="map-tool">
    <div
      class="bottom-tool"
      :class="rightPanelShow ? 'bottom-tool-2' : 'bottom-tool-1'"
    >
      <BaseLayer />
    </div>
    <div class="left-tool" v-if="rightPanel != 'floor'">
      <Legend />
    </div>
    <!-- <Restoration /> -->
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import BaseLayer from "./CBaseLayer.vue";
import Legend from "./CLegend.vue";
// import Restoration from "./CRestoration.vue";
// import {
//   getDataStore,
//   getZlxmData,
//   getGridmanList
// } from "@/assets/modules/service";
@Component({
  name: "MapTool",
  components: {
    BaseLayer,
    Legend,
    // Restoration
  }
})
export default class extends Vue {
  // get rightPanel() {
  //   return this.$store.getters["videoPanel/rightPanel"];
  // }

  get rightPanelShow() {
    return this.$store.getters["videoPanel/rightPanelShow"];
  }

  // get bottomPanel() {
  //   return this.$store.getters["videoPanel/bottomPanel"];
  // }

  // get bottomPanelShow() {
  //   return this.$store.getters["videoPanel/bottomPanelShow"];
  // }
  // gridmanData: any[] = [];
  // zlxmData: any[] = [];
  // zlqyData: any[] = [];
  // jjjgData: any[] = [];
  mounted() {
    // this.getGridmanList();
    // this.getZlqyData();
    // this.getJjjgData();
    // this.getZlxmData();
  }
  // getGridmanList() {
  //   const data: any = {
  //     queryType: 0,
  //     areaType: 0,
  //     page: 1,
  //     pageSize: 1000
  //   };
  //   getGridmanList(data).then((res: any) => {
  //     console.log(res);
  //     if (res?.data && res.data.datal && res.data.datal.length > 0) {
  //       this.gridmanData = res.data.datal;
  //     } else {
  //       this.gridmanData = [];
  //     }
  //     this.$store.commit("videoData/setGridmanData", this.gridmanData);
  //   });
  // }
  // getZlxmData() {
  //   getZlxmData().then((res: any) => {
  //     console.log(res);
  //     if (res?.data && res.data.length > 0) {
  //       this.zlxmData = res.data;
  //     } else {
  //       this.zlxmData = [];
  //     }
  //     this.$store.commit("videoData/setZlxmData", this.zlxmData);
  //   });
  // }
  // getZlqyData() {
  //   const data: any = {
  //     dataStoreId: "1687918297320",
  //     page: {
  //       usePagination: false
  //     }
  //   };
  //   getDataStore(data).then((res: any) => {
  //     console.log(res);
  //     if (res?.data?.records && res.data.records.length > 0) {
  //       this.zlqyData = res.data.records;
  //     } else {
  //       this.zlqyData = [];
  //     }
  //     this.$store.commit("videoData/setZlqyData", this.zlqyData);
  //   });
  // }
  // getJjjgData() {
  //   const data: any = {
  //     dataStoreId: "1689126716319",
  //     page: {
  //       usePagination: false
  //     }
  //   };
  //   getDataStore(data).then((res: any) => {
  //     console.log(res);
  //     if (res?.data?.records && res.data.records.length > 0) {
  //       this.jjjgData = res.data.records;
  //     } else {
  //       this.jjjgData = [];
  //     }
  //     this.$store.commit("videoData/setJjjgData", this.jjjgData);
  //   });
  // }
}
</script>

<style lang="scss" scoped>
.map-tool {
  width: 1920px;
  height: 1080px;
  pointer-events: none;
  color: white;
  .bottom-tool {
    position: fixed;
    bottom: 321px;
    right: 483px;
    pointer-events: auto;
    display: flex;
    ::v-deep .tool-item {
      height: 28px;
      line-height: 28px;
      font-family: AlibabaPuHuiTi_2_45_Light;
      font-size: 14px;
      background-color: #001022;
      border-radius: 4px;
      cursor: pointer;
      padding: 0px 15px;
      &:not(:last-of-type) {
        margin-right: 20px;
      }
    }
    &.bottom-tool-1 {
      right: 34px;
      bottom: 34px;
    }
    &.bottom-tool-2 {
      right: 490px;
      bottom: 320px;
    }
  }
  .left-tool {
    position: fixed;
    top: 109px;
    left: 483px;
    pointer-events: auto;
    width: 60px;
    ::v-deep .tool-item {
      font-family: AlibabaPuHuiTi_2_65_Medium;
      font-size: 12px;
      color: #ffffff;
      width: 60px;
      height: 80px;
      background-color: #003773;
      border-radius: 0;
      margin-bottom: 2px;
      text-align: center;
      cursor: pointer;
      &:first-of-type {
        border-radius: 4px 4px 0px 0px;
      }
      &:last-of-type {
        border-radius: 0px 0px 4px 4px;
      }
    }
  }
}
</style>
